<template>
  <view>
    <u-navbar title="修改"></u-navbar>
    <u-gap height="20" bg-color="#F0F1F2" />
    <view class="container">
      <view v-if="status == 3" class="">
        <view class="desc">
          <view class="" style="font-size: 32rpx">
            请为您的账号{{ userInfo.mobile.substr(0, 3) }} ****
            {{ userInfo.mobile.substr(8, 3) }}设置一个新密码
          </view>
          <p style="color: #999999">密码长度限制6-20位，不能为纯数字或纯字母</p>
        </view>
        <view class="inp">
          <u-icon :name="getImageUrl('mima.png')" size="30"></u-icon>
          <input v-model="code" type="text" placeholder="请输入验证码" />
          <text v-if="time <= 0" @click="onCode" style="color: #999999">获取验证码</text>
          <text v-else style="color: #999999">{{ time }}秒后重新获取</text>
        </view>
        <!-- <input class="pwa-inp" placeholder="请输入旧密码" type="password" v-model="oldPwd" /> -->
        <!-- <view class="">
					 <input class="pwa-inp" placeholder="请输入旧密码" type="password" v-model="oldPwd" />

				</view> -->
        <u-line color="#DFE0E6"></u-line>
        <input v-model="newPwd" class="pwa-inp" placeholder="请输入新密码" type="password" />
        <u-line color="#DFE0E6"></u-line>
        <input v-model="againPwd" class="pwa-inp" placeholder="请再次输入新密码" type="password" />
        <u-line color="#DFE0E6"></u-line>

        <view class="submit-btn btn" @click="submit"> 确认修改 </view>
      </view>

      <view v-else-if="status == 2" class="">
        <view class="desc">
          <view class="" style="font-size: 32rpx">
            请为您的手机号{{ userInfo.mobile.substr(0, 3) }} ****
            {{ userInfo.mobile.substr(8, 3) }} 设置一个新号码
          </view>
        </view>

        <view class="inp-box">
          <u-icon class="icon" :name="getImageUrl('phone.png')" size="30"></u-icon>
          <input class="pwa-inp" placeholder="请输入新手机号" type="number" v-model="newMobile" />
        </view>
        <u-line color="#DFE0E6"></u-line>

        <view class="inp">
          <u-icon :name="getImageUrl('mima.png')" size="30"></u-icon>
          <input v-model="newCode" type="text" placeholder="请输入新手机验证码" />
          <text v-if="time2 <= 0" @click="onNewCode" style="color: #999999">获取新手机验证码</text>
          <text v-else style="color: #999999">{{ time2 }}秒后重新获取</text>
        </view>
        <!-- <view class="inp">
					<u-icon :name="getImageUrl('mima.png')" size="30"></u-icon>
					<input v-model="code" type="text" placeholder="请输入旧手机号验证码">
					<text v-if="time <= 0" @click="onCode" style="color:#999999">获取旧手机号验证码</text>
					<text v-else style="color:#999999">{{time}}秒后重新获取</text>
				</view> -->

        <u-line color="#DFE0E6"></u-line>

        <view class="submit-btn btn" @click="submit"> 确认修改 </view>
      </view>

      <view v-if="status == 5" class="">
        <view v-if="realStatus == 1" class="">
          <view class="desc">
            <view class="warning">
              注：实名身份认证信息，只做认证使用，请放心！认证成功后不可修改，请务必填写您本人真实信息！
            </view>
          </view>

          <view v-if="realRes == 2" class=""> 认证失败请重新认证 </view>

          <view class="inp-box">
            <view class="inp-title"> <text>*</text> 姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名 </view>
            <input class="pwa-inp" placeholder="请输入真实姓名" v-model="realNameForm.realName" />
          </view>
          <u-line color="#DFE0E6"></u-line>

          <view class="inp-box">
            <view class="inp-title"> <text>*</text>身份证号 </view>
            <input
              class="pwa-inp"
              placeholder="请输入真实有效的身份证号"
              v-model="realNameForm.idcardNo"
            />
          </view>
          <u-line color="#DFE0E6"></u-line>

          <view class="card">
            <view class="inp-title"> <text>*</text> 上传身份证照片 </view>
            <view class="card-img">
              <u-icon
                v-if="realNameForm.idcardFrontUrl"
                @click="onImg(1)"
                :name="realNameForm.idcardFrontUrl"
                size="320"
              ></u-icon>
              <u-icon v-else @click="onImg(1)" :name="getImageUrl('scrx.png')" size="320"></u-icon>
              <u-icon
                v-if="realNameForm.idcardBackUrl"
                @click="onImg(2)"
                :name="realNameForm.idcardBackUrl"
                size="320"
              ></u-icon>
              <u-icon v-else @click="onImg(2)" :name="getImageUrl('scgh.png')" size="320"></u-icon>
            </view>
          </view>
        </view>

        <view v-if="realStatus == 2" class="">
          <view class="realname-top">
            <u-icon :name="getImageUrl('success.png')" size="80"></u-icon>
            <view class="" style="font: 32rpx"> 实名认证成功 </view>
            <p>实名认证信息认证后不可修改</p>
          </view>

          <view class="realname-info">
            <view class="">
              <text>真实姓名：***</text>
            </view>
            <view class=""> <text>身份证号：</text> ****************** </view>
          </view>
        </view>
        <view v-if="realStatus != 2" class="submit-btn btn" @click="submit"> 确认修改 </view>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadFiles } from '@/common/upload.js'
// #ifdef APP
import permision from '@/common/permission.js'
// #endif
export default {
  data() {
    return {
      status: 3,
      oldPwd: '',
      newPwd: '',
      againPwd: '',
      userInfo: '',
      code: '',
      newCode: '',
      newMobile: '',
      time: 0,
      time2: 0,
      realNameForm: {
        realName: '',
        idcardNo: '',
        idcardFrontUrl: '',
        idcardBackUrl: ''
      },
      realName: '',
      realStatus: '',
      realRes: 0
    }
  },
  onLoad(options) {
    this.status = options.status
    this.userInfo = uni.getStorageSync('userInfo')
    console.log(this.userInfo)
    if (this.status == 5) {
      if (this.userInfo.idcardVerified) {
        this.realStatus = 2
      } else {
        this.$u.get('/app-api/member/idcard/get').then(
          (res) => {
            if (res.data.status == 1) {
              this.realStatus = 2
              this.realName = res.data.realName
            } else {
              //this.realNameForm = res.data
              this.realStatus = 1
              this.realRes = res.data.status
            }
          },
          (err) => {
            this.realStatus = 1
          }
        )
      }
    }
  },
  methods: {
    onCode() {
      this.$u
        .post('/app-api/member/auth/send-sms-code', {
          mobile: this.userInfo.mobile,
          scene: this.status
        })
        .then((res) => {
          this.$u.toast('发送成功')
        })
      this.time = 60
      let it = setInterval(() => {
        if (this.time <= 0) {
          clearInterval(it)
          return
        }
        this.time -= 1
      }, 1000)
    },
    onNewCode() {
      if (this.newMobile == '') {
        return this.$u.toast('请输入新手机号')
      }
      this.$u
        .post('/app-api/member/auth/send-sms-code', {
          mobile: this.newMobile,
          scene: 2
        })
        .then((res) => {
          this.$u.toast('发送成功')
        })
      this.time2 = 60
      let it = setInterval(() => {
        if (this.time2 <= 0) {
          clearInterval(it)
          return
        }
        this.time2 -= 1
      }, 1000)
    },
    onImg(e) {
      // #ifdef APP
      if (!uni.getStorageSync('albumPer')) {
        uni.dialog.confirm(
          '照片权限说明',
          '上传的资料图片信息需要照片文件访问权限，请您手动开启授权，否则无法完成资料上传。',
          () => {
            uni.setStorageSync('albumPer', true)
            permision
              .androidPermissionCheck(['android.permission.READ_EXTERNAL_STORAGE'])
              .then((res) => {
                if (res == 1) {
                  uni.setStorageSync('albumPer', true)
                  this.up(e)
                } else if (res == 0) {
                  uni.setStorageSync('albumPer', true)
                  uni.dialog.confirm(
                    '照片权限说明',
                    '上传的资料图片信息需要照片文件访问权限，请您手动开启授权，否则无法完成资料上传。',
                    () => {
                      this.up(e)
                    }
                  )
                  return
                } else {
                  uni.dialog.confirm(
                    '照片权限说明',
                    '您已关闭文件访问权限，如需上传的资料图片，请您手动开启授权，否则无法完成资料上传。',
                    () => {}
                  )
                  return
                }
              })
          }
        )
        return
      }
      this.up(e)
      // #endif
    },
    up(e) {
      uni.chooseImage({
        sourceType: ['album'],
        success: (res) => {
          uploadFiles(res.tempFilePaths[0]).then((res) => {
            if (e == 1) {
              this.realNameForm.idcardFrontUrl = res.data
            } else {
              this.realNameForm.idcardBackUrl = res.data
            }
          })
        }
      })
    },
    back() {
      uni.navigateTo({
        url: '/universal/setting/setting'
      })
    },
    submit() {
      if (this.status == 3) {
        // if(! this.oldPwd){
        // 	this.$u.toast('请输入旧密码')
        // 	return
        // }
        if (!this.code) {
          this.$u.toast('请输入验证码')
          return
        }
        if (!this.newPwd) {
          this.$u.toast('请输入新密码')
          return
        }
        if (this.newPwd != this.againPwd) {
          this.$u.toast('新密码和确认密码必须相同')
          return
        }

        this.$u
          .put('/app-api/member/user/update-password', {
            password: this.newPwd,
            code: this.code
          })
          .then((res) => {
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('tokenInfo')
            this.$u.toast('修改成功，需重新登陆')
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/ucenter/ucenter'
              })
            }, 1000)
          })
      } else if (this.status == 2) {
        if (!this.code) {
          this.$u.toast('请输入验证码')
          return
        }

        if (!this.newCode) {
          this.$u.toast('请输入验证码')
          return
        }
        if (!this.newMobile) {
          this.$u.toast('请输入手机号码')
          return
        }

        this.$u
          .put('/app-api/member/user/update-mobile', {
            mobile: this.newMobile,
            code: this.code,
            oldCode
          })
          .then((res) => {
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('tokenInfo')
            this.$u.toast('修改成功，需重新登陆')
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/ucenter/ucenter'
              })
            }, 1000)
          })
      } else if (this.status == 5) {
        if (!this.realNameForm.realName) {
          this.$u.toast('请输入真实姓名')
          return
        }

        if (!this.realNameForm.idcardNo) {
          this.$u.toast('请输入身份证号码')
          return
        }
        if (!this.realNameForm.idcardFrontUrl) {
          this.$u.toast('请上传身份证正面照')
          return
        }
        if (!this.realNameForm.idcardBackUrl) {
          this.$u.toast('请上传身份证背面照')
          return
        }

        uni.dialog.confirm('温馨提示', '请确认填写信息正确真实？', () => {
          this.$u.post('/app-api/member/idcard/verify', this.realNameForm).then((res) => {
            this.$u.toast('成功')
            setTimeout(() => {
              uni.navigateBack()
            }, 800)
          })
        })
      }
    }
  }
}
</script>

<style>
@import url('../../style/btn.css');

.container {
  padding: 20rpx;
}

.desc {
  line-height: 45rpx;
}

.inp-box {
  display: flex;
  align-items: center;
}

.pwa-inp {
  flex: 1;
  height: 60rpx;
  margin: 15rpx 0;
}

.inp-tip {
  font-size: 30rpx;
  color: #0f76bc;
}

.icon {
  margin-right: 10rpx;
}

.inp-title {
  margin-right: 15rpx;
  font-size: 30rpx;
}

.inp-title text {
  color: red;
}

.warning {
  padding: 20rpx;
  background-color: #f5e8e6;
  color: #f54831;
  font-size: 26rpx;
}

.card {
  margin-top: 40rpx;
}

.card-img {
  display: flex;
  justify-content: center;
  margin: 20rpx 0;
}

.btn {
  margin-top: 50rpx;
}

.realname-top {
  text-align: center;
  line-height: 50rpx;
  margin: 50rpx;
}

.realname-top p {
  color: #999999;
}

.realname-info {
  padding: 20rpx;
  line-height: 55rpx;
  background-color: #f5f5f5;
}

.realname-info text {
  color: #999999;
}

.inp {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  height: 90rpx;
  background-color: #fff;
  margin: 30rpx 0;
}

.inp input {
  flex: 1;
  margin: 0 20rpx;
}
</style>
